<template>
  <div id="">
    <div id="main" style="width: 100%;height: 500px;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    mounted() {
      this.createEcharts()
    },
    data() {
      return {

      }
    },
    methods: {
      createEcharts() {
        let chartDom = document.getElementById('main');
        let myChart = echarts.init(chartDom);
        let option;

        const symbolSize = 20;
        const data = [
          [40, -10],
          [-30, -5],
          [-76.5, 20],
          [-63.5, 40],
          [39.20, -6.3]
        ];
        option = {
          title: {
            text: '任务操作',
            left: 'center'
          },
          tooltip: {
            triggerOn: 'none',
            formatter: function(params) {
              if (params.data[0].toFixed(2) == 40) {
                return '导入文件'
              } else if (params.data[0].toFixed(2) == -30) {
                return '扫描文件'
              } else if (params.data[0].toFixed(2) == -76.5) {
                return '扫描完成'
              } else if (params.data[0].toFixed(2) == -63.5) {
                return '导出文件'
              } else {
                return '保存重命名'
              }
              // return (
              //   'X: ' +
              //   params.data[0].toFixed(2) +
              //   '<br>Y: ' +
              //   params.data[1].toFixed(2)
              // );
            }
          },
          grid: {
            top: '8%',
            bottom: '12%'
          },
          xAxis: {
            min: -100,
            max: 70,
            type: 'value',
            axisLine: {
              onZero: false
            }
          },
          yAxis: {
            min: -30,
            max: 60,
            type: 'value',
            axisLine: {
              onZero: false
            }
          },
          dataZoom: [{
              type: 'slider',
              xAxisIndex: 0,
              filterMode: 'none'
            },
            {
              type: 'slider',
              yAxisIndex: 0,
              filterMode: 'none'
            },
            {
              type: 'inside',
              xAxisIndex: 0,
              filterMode: 'none'
            },
            {
              type: 'inside',
              yAxisIndex: 0,
              filterMode: 'none'
            }
          ],
          series: [{
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            data: data
          }]
        };
        setTimeout(function() {
          // Add shadow circles (which is not visible) to enable drag.
          myChart.setOption({
            graphic: data.map(function(item, dataIndex) {
              return {
                type: 'circle',
                position: myChart.convertToPixel('grid', item),
                shape: {
                  cx: 0,
                  cy: 0,
                  r: symbolSize / 2
                },
                invisible: true,
                draggable: true,
                ondrag: function(dx, dy) {
                  onPointDragging(dataIndex, [this.x, this.y]);
                },
                onmousemove: function() {
                  showTooltip(dataIndex);
                },
                onmouseout: function() {
                  hideTooltip(dataIndex);
                },
                z: 100
              };
            })
          });
        }, 0);
        window.addEventListener('resize', updatePosition);
        myChart.on('dataZoom', updatePosition);

        function updatePosition() {
          myChart.setOption({
            graphic: data.map(function(item, dataIndex) {
              return {
                position: myChart.convertToPixel('grid', item)
              };
            })
          });
        }

        function showTooltip(dataIndex) {
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
          });
        }

        function hideTooltip(dataIndex) {
          myChart.dispatchAction({
            type: 'hideTip'
          });
        }

        function onPointDragging(dataIndex, pos) {
          data[dataIndex] = myChart.convertFromPixel('grid', pos);
          // Update data
          myChart.setOption({
            series: [{
              id: 'a',
              data: data
            }]
          });
        }

        option && myChart.setOption(option);
      }
    }
  }
</script>

<style>
</style>
